<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<sec:authorize access="hasRole('ROLE_EDIT_AE')">

<div class="row">
	<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
		<h1 class="page-title txt-color-blueDark">	
			<i class="fa fa-edit fa-fw "></i> 
				Agregar Visita Acta de Entrega: ${idActa}			
		</h1>
	</div>
</div>

<!-- widget grid -->
<section id="widget-grid" class="">	

	<!-- START ROW -->

	<div class="row">

		<!-- NEW COL START -->
		<article class="col-sm-12 col-md-12 col-lg-8">

			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-deletebutton="false" data-widget-togglebutton="false">

				<header>
					<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
					<h2>Crear Visita</h2>
				</header>

				<!-- widget div-->
				<div>

					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body no-padding">

						<form id="visita-acta-form" action="" class="smart-form">
								
								<fieldset>
									<label class="input">
										<input name="gid" type="hidden" value="${idActa}"/>
									</label>									
								</fieldset>
								<fieldset>
									<legend>Datos de Visita</legend>
									<div class="row">
										<section class="col col-4">
											<label class="label">Folio:</label> 
												<label class="input">
												<input name="folio" type="text" class="input" value="${visitaView.folio}"/>
											</label>
										</section>
										<section class="col col-4">
											<label class="label">Observaciones:</label>
											<label class="input">
												<input name=observacion type="text" class="input"/>
											</label>
										</section>
										<section class="col col-4">
											<label class="label">Fecha:</label>
											<label class="input">
												<input name="fecha" type="date" class="input" />
											</label>
										</section>
									</div>
								</fieldset>
								<footer>
									<button type="submit" class="btn btn-primary">Guardar
									</button>
									<button type="button" class="btn btn-default" onclick="window.history.back();">Cancelar</button>
								</footer>

						</form>																							

					</div>
					<!-- end widget content -->

				</div>
				<!-- end widget div -->

			</div>
			<!-- end widget -->


		

		</article>
		<!-- END COL -->

	</div>

	<!-- END ROW -->	

</section>
<!-- end widget grid -->

<!-- SCRIPTS ON PAGE EVENT -->
<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	*
	* pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	*
	* // activate tooltips
	* $("[rel=tooltip]").tooltip();
	*
	* // activate popovers
	* $("[rel=popover]").popover();
	*
	* // activate popovers with hover states
	* $("[rel=popover-hover]").popover({ trigger: "hover" });
	*
	* // activate inline charts
	* runAllCharts();
	*
	* // setup widgets
	* setup_widgets_desktop();
	*
	* // run form elements
	* runAllForms();
	*
	********************************
	*
	* pageSetUp() is needed whenever you load a page.
	* It initializes and checks for all basic elements of the page
	* and makes rendering easier.
	*
	*/

	pageSetUp();
	/*
	 * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
	 * eg alert("my home function");
	 * 
	 * var pagefunction = function() {
	 *   ...
	 * }
	 * loadScript("js/plugin/_PLUGIN_NAME_.js", pagefunction);
	 * 
	 */
	
	// PAGE RELATED SCRIPTS
	
	// pagefunction	
	
	var pagefunction = function() {
		//console.log("cleared");
			
			/* // DOM Position key index //
			
				l - Length changing (dropdown)
				f - Filtering input (search)
				t - The Table! (datatable)
				i - Information (records)
				p - Pagination (paging)
				r - pRocessing 
				< and > - div elements
				<"#id" and > - div with an id
				<"class" and > - div with a class
				<"#id.class" and > - div with an id and class
				
				Also see: http://legacy.datatables.net/usage/features
			*/		
	var $checkoutForm = $('#visita-acta-form').validate({
			// Rules for form validation
			rules : {
				folio : {
					required : true,
					digits : true
				},
				observacion : {
					required : true
				},
				fecha : {
					required : true
				}
			},
			messages : {
				folio : {
					required : 'Folio de visita es requerido',
					digits : 'Folio esta compuetso por numeros'
				},
				observacion : {
					required : 'Observacion de visita requerida'					
				},
				fecha : {
					required : 'Fecha de visita requerida'
				}
			},

			// Ajax form submition
			submitHandler : function(form) {
				$(form).ajaxSubmit({
					url : 'ajax/agregar_visita_acta.html',
					type : 'POST',
					success : function() {
						$("#checkout-form").addClass('submited');
						location.href = "${pageContext.request.contextPath}/home.html#ajax/"+${idActa}+"/visitas_acta_de_entrega.html";
					},
					error: function (jqXHR, ex) {
				        $.bigBox({
				        	title : "Error al Agregar Visita a Acta de Entrega",
				        	content :jqXHR.responseText,
				        	color : "#C46A69",
				        	icon : "fa fa-warning shake animated",
				        	timeout : 10000
				        });
				    }
				});
			},

			// Do not change code below
			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});

	};
	// end pagefunction
	
	// run pagefunction on load

	loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);

</script>


</sec:authorize>

								